<template>
  <page>
    <div v-if='reportObj !== undefined'>

<!--   报告   -->
      <div class='content'>

        <div>
          <PannelImg :imgs='reportObj.imgUrl' />
        </div>


        <div>
          <table style='margin-top: 1em;margin-left: 1em'>
            <tr>
              <th class='text-label'>
                品牌/车系
              </th>
              <td class='text-value'>
                {{reportObj.carSeries}}
              </td>
            </tr>
            <tr>
              <th class='text-label'>
                车款
              </th>
              <td class='text-value'>
                {{reportObj.carType}}
              </td>
            </tr>
            <tr>
              <th class='text-label'>
                V I N 码
              </th>
              <td class='text-value'>
                {{reportObj.vin}}
              </td>
            </tr>
          </table>
        </div>

        <div v-if='reportObj.floodPass && reportObj.burnPass && reportObj.crashPass' style='margin-top: 1em;margin-bottom: 2em'>
          <div style='border: 0.4em solid #F0C243;'>
            <div style='padding: 1em'>

                <div style='text-align: center'>
                  <img style='width: 20em' src='weapp/title1.png'/>
                </div>
                <div style='text-align: center;'>
                  <img style='width: 13em;vertical-align: middle' src='weapp/title2.png'/>
                  <img style='width: 8em;vertical-align: middle;margin-left: 1em' src='weapp/huaan.png'/>
                </div>
                <div>
                  自检测报告激活之日90天内，若您发该车辆为重大事故、 火烧、水泡车辆，而检测报告未准确反映的，功夫车服对 该车辆进行差价赔付或按照市场价回购。
                </div>


              <table style='width: 100%;margin-top: 1em;padding-left: 1em'>
                <tr>
                  <td>
                    <div style='vertical-align: middle;display: flex'>
                      <img src='weapp/flood.png' style='width: 2em'/>
                      <span style='font-size: 1.3em'>泡水排查</span>
                    </div>
                  </td>
                  <td>
                    <div style='vertical-align: middle;display: flex'>
                      <img src='weapp/burn.png' style='width: 2em'/>
                      <span style='font-size: 1.3em'>火烧排查</span>
                    </div>
                  </td>
                  <td>
                    <div style='vertical-align: middle;display: flex'>
                      <img src='weapp/accident.png' style='width: 2em'/>
                      <span style='font-size: 1.3em'>事故排查</span>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <PassOrNot style='margin-left: 0.8em' :pass='reportObj.floodPass'/>
                  </td>
                  <td>
                    <PassOrNot style='margin-left: 0.8em' :pass='reportObj.burnPass'/>
                  </td>
                  <td>
                    <PassOrNot style='margin-left: 0.8em' :pass='reportObj.crashPass'/>
                  </td>
                </tr>
              </table>
            </div>

          </div>
        </div>


        <CarTest :car-test='reportObj.carTestData'/>

        <TestItems :test-type='reportObj.flood'/>
        <TestItems :test-type='reportObj.burn'/>
        <TestItems :test-type='reportObj.crash'/>
      </div>

    </div>
  </page>
</template>

<script setup lang='ts'>
import TestItems from './TestItems.vue'
import CarTest from './CarTest.vue'
import PassOrNot from './PassOrNot.vue'
import { CarTestType } from './CarTest.vue'
import { TestType } from  './TestItems.vue'
import { FetchData } from '../report/ts/FetchData'
import { ref } from 'vue'
import { useRoute } from 'vue-router';
import { Itemtype } from 'pages/weapp/ItemTable.vue';
import PannelImg from './PannelImg.vue'
export interface WeReportType {
  carSeries: string,
  carType: string,
  vin: string,
  floodPass: boolean,
  burnPass: boolean,
  crashPass: boolean,
  carTestData: CarTestType,
  flood: TestType,
  burn: TestType,
  crash: TestType,
  imgUrl: string[]

}
let rote = useRoute();
const uuid = <string> rote.query.uuid;
let reportObj = ref<WeReportType>()
new FetchData(uuid,(res) => {

  const car = res.car;
  const test = res.test;
  const checkInfo = test.check;
  let data = {
    carSeries: car.carSeries,
    carType: car.carType,
    vin: car.vin,
    floodPass: !checkInfo.flood.status,
    burnPass: !checkInfo.burnd.status,
    crashPass: !checkInfo.crashed.status,
    carTestData: {
      plate: car.license,
      miliage: car.kiloMeters,
      volume: car.volume,
      color: car.color,
      carTrueType: car.carFullType
    },
    flood: {
      limits: checkInfo.flood.checkSize,
      name: "水泡迹象检测",
      items: checkInfo.flood.checkItem,
      errors: checkInfo.flood.status
    },
    burn: {
      limits: checkInfo.burnd.checkSize,
      name: "火烧迹象检测",
      items: checkInfo.burnd.checkItem,
      errors: checkInfo.burnd.status
    },
    crash: {
      limits: checkInfo.crashed.checkSize,
      name: "重大事故迹象检测",
      items: checkInfo.crashed.checkItem,
      errors: checkInfo.crashed.status
    },
    imgUrl: res.imgUrls
  }
  reportObj.value = data
},'orderid')




</script>

<style scoped lang='sass'>

.content
  padding: 1em
.text-label
  padding-right: 1em
  font-size: 0.9em
  font-weight: bold
  text-align: justify
  text-align-last: justify
.text-value
  font-weight: normal
</style>
